<?php
get_header(); 
 ?>

 <script type="text/javascript">
	$('.header').addClass('about-us');
</script>
<script src="<?php echo bloginfo('template_url'); ?>/js/jquery-migrate-1.2.1.js"></script>

			<div class="row">
	    		<div class="col-sm-4 col-lg-4 col-12 header-description">
	    			<div class="title">
                        <div class="line_1">Đôi nét về</div>
                        <div class="line_2">K&amp;K Fashion</div>
                    </div>
	    		</div>
	    		<div class="col-sm-8 col-lg-8 col-12 about-images">
	    			<img src="<?php echo bloginfo('template_url'); ?>/img/about-banner.png">
	    		</div>
	    	</div>
	    </div>
    </div>
    <!-- Content -->
    <div class="container about-us">
    	<div class="row">
	    	<?php
	            wp_reset_query();
	            if (have_posts())
	            while (have_posts()) : the_post();
	        		$content =  get_the_content();
	        		$content = explode('<hr />', $content);
	                ?>
    		<div class="col-lg-4 col-sm-5">
    			<?php echo isset($content[0])?$content[0]:''; ?>
    		</div>
    		<div class="col-lg-6 col-sm-7">
    			<?php echo isset($content[1])?$content[1]:''; ?>
    		</div>
    		<div class="col-lg-2 visible-lg col_3">
    			<div class="col_3_top">
    			<?php echo isset($content[2])?$content[2]:''; ?>
                </div>

                <div class="col_3_bottom">
    			<?php echo isset($content[3])?$content[3]:''; ?>
                </div>
    		</div>
            <?php endwhile; ?>
    	</div>
    </div>
    <p class="clearfix"></p>
    <!-- End Content -->

<style type="text/css">
    .col-lg-6.col-sm-7 img{
        margin-top: 52px;
    }
    .about-images{
        overflow: visible !important;
    }
    .about-images img{
        margin-left: -110px;
    }
@media (min-width: 768px) and (max-width: 991px) {
    .about-images img{
        margin-left: -50px;
    }
}
@media (max-width: 767px){
    .about-images{
        overflow: hidden !important;
    }
    .about-images img {
        margin-left: -45px;
        width: 380px;
    }
    .header.about-us {
        height: 260px;
        margin-bottom: 100px;
    }
}
@media (min-width: 321px) and (max-width: 767px) {
    .about-images img {
        margin-left: -80px;
        width: auto;
    }
    .header.about-us {
        height: 365px;
        margin-bottom: 165px;
    }
}
</style>
<?php get_footer() ?>